<template>
	<s-layout navbar="custom" title="团购详情" :showLeftButton="true" :navbarStyle="{type:'color',color:state.bgColor}"
		:bgStyle="{
		color:'#F6F6F6'
	}" :onShareAppMessage="shareData">
		<template v-if="state.data">
			<image class="goods-image" :src="sheep.$url.cdn(state.data.image)" mode="aspectFill"></image>
			<view class="goods-info-box ss-p-x-24">
				<view class="price ss-flex justify-between align-center ss-p-t-24">
					<view class="price-left ss-flex">
						<view class="money">￥{{state.data.price}}</view>
						<view class="discount ss-m-l-10 ss-p-x-10" v-if="state.data.is_discount === 1">
							{{state.data.discount}}折
						</view>
						<view class="original ss-m-l-10" v-if="state.data.is_discount === 1">
							￥{{state.data.original_price}}</view>
					</view>
					<view class="price-right">年售 {{state.data.sales}}+</view>
				</view>
				<view class="prompt ss-m-t-24 ss-p-x-30 ss-p-b-20">
					<view class="goods-name ss-line-1">{{state.data.title}}</view>
					<view class="prompt-item ss-flex ss-m-t-20" v-if="state.data.is_limit === 1">
						<view class="prompt-label">限购</view>
						<view class="prompt-content ss-m-l-20">每人限购{{state.data.limit_num}}张</view>
					</view>
					<view class="prompt-item ss-flex ss-m-t-20">
						<view class="prompt-label">须知</view>
						<!-- 需预约·{{calcBusiness}}可用· -->
						<view class="prompt-content ss-m-l-20">购买后{{state.data.validity}}天内有效</view>
					</view>
					<view class="prompt-item ss-flex ss-m-t-20">
						<view class="prompt-label">保障</view>
						<view class="prompt-content ss-m-l-20">随时退·过期退</view>
					</view>
				</view>
				<view class="tabs ss-flex ss-m-t-30 ss-p-l-20">
					<view class="tabs-item ss-m-r-50">团购详情</view>
					<!-- <view class="tabs-item ss-m-r-50" :class="[state.tabs_index === 0 && 'tab-active']"
						@click="changeTabs(0)">团购详情</view> -->
					<!-- <view class="tabs-item" :class="[state.tabs_index === 1 && 'tab-active']" @click="changeTabs(1)">购买须知
					</view> -->
					<!-- <view class="tabs-line" :style="{transform: `translate(${state.tabs_left})`}"></view> -->
				</view>
				<view class="details ss-m-t-30 ss-p-30">
					<!-- <view class="suit ss-flex ss-m-b-20">
						<view class="suit-label">适用宠物</view>
						<view class="suit-content ss-m-l-20 ss-line-1">{{state.data.apply}}</view>
					</view>
					<view class="suit ss-flex ss-m-b-20">
						<view class="suit-label">适用毛长</view>
						<view class="suit-content ss-m-l-20">{{hair[state.data.hair]}}</view>
					</view>
					<view class="suit ss-flex ss-p-b-20 suit-b-b">
						<view class="suit-label">适用体重</view>
						<view class="suit-content ss-m-l-20">{{state.data.weight}}</view>
					</view> -->
					<view class="project-list ss-flex flex-wrap ss-m-t-20" v-if="state.data && state.data.product_list.length>0">
						<view class="project-item ss-m-b-20" v-for="(item,index) in state.data.product_list"
							:key="index">
							<view class="content-top ss-p-l-30">{{item.product_content}}</view>
							<view class="content-bottom ss-flex align-start ss-p-l-30 ss-p-r-20 ss-p-y-20">
								<view class="content-b-left">包含项目</view>
								<view class="content-b-right">
									<template v-for="(value,page) in item.product_list" :key="page">
										<template v-for="(i,ind) in value.list" :key="page">
											<view
												class="content-b-right-item ss-m-b-20 ss-flex justify-between align-center">
												<view class="flex-sub ss-line-1">{{i.name}}</view>
												<view class="ss-flex">
													<view>{{i.num}}份</view>
													<view style="width:130rpx"> {{i.price?`￥${i.price}`:''}}</view>
												</view>
											</view>
											<view class="content-b-right-remark">
												{{i.describe}}
											</view>
										</template>
									</template>
								</view>
							</view>
						</view>
					</view>
					<view class="original-price">
						门市价{{state.data.price}}元
					</view>
					<view class="describe ss-p-y-30 ss-flex justify-start">
						<text>注明：{{state.data.explain}}</text>
					</view>
					<view class="details-title ss-m-t-30 ss-m-b-20">
						图文详情
					</view>
					<mp-html :content="state.data.details"></mp-html>
				</view>
				<view class="instructions">
					<view class="instructions-title ss-m-t-40 ss-m-b-20 ss-p-l-20">购买须知</view>
					<view class="instructions-box ss-p-24">
						<view class="instructions-item">
							<view class="instructions-item-label ss-m-b-16">有效期</view>
							<view class="instructions-item-content ss-m-b-24">购买后{{state.data.validity}}天内有效</view>
						</view>
						<view class="instructions-item">
							<view class="instructions-item-label ss-m-b-16">预约信息</view>
							<view class="instructions-item-content ss-m-b-24">请您提前{{state.data.subscribe}}小时预约</view>
						</view>
						<view class="instructions-item">
							<view class="instructions-item-label ss-m-b-16">使用时间</view>
							<view class="instructions-item-content ss-m-b-24">{{state.business_rule[0].time_begin||'00:00'}}至{{state.business_rule[0].time_end||'00:00'}}</view>
						</view>
						<view class="instructions-item">
							<view class="instructions-item-label ss-m-b-16">规则提醒</view>
							<view class="instructions-item-content ss-m-b-24">不再与其他优惠券同享</view>
						</view>
						<view class="instructions-item">
							<view class="instructions-item-label ss-m-b-16">温馨提示</view>
							<view class="instructions-item-content ss-m-b-24">
								如需团购券发票，请您在消费时向商户索要。银贯宝只负责推荐商户商品，不承担任何责任，感谢您的理解和支持！</view>
						</view>
					</view>
				</view>
				
				
				<view class="instructions" v-if="state.data.relate_store_list.data.length>0">
					<view class="instructions-title ss-m-t-40 ss-m-b-20 ss-p-l-20">用户推荐</view>
					<view class="instructions-box ss-p-y-24">
							<template v-for="(item,index) in state.data.relate_store_list.data" :key="index">
								<s-group-buy-list-custom style="transform: scale(.95);" :data="item" @item-click="itemClick(item)"></s-group-buy-list-custom>
							</template>
					</view>
				</view>
				<!-- 				<view class="store">
					<view class="store-title ss-m-t-40 ss-m-b-20 ss-p-l-20">适用门店(3)</view>
					<view class="store-box ss-flex ss-p-24">
						<image class="store-box-left"></image>
						<view class="store-box-right ss-flex flex-column justify-between">
							<view class="store-item ss-flex justify-between align-center">
								<view class="store-name">xxx店</view>
								<view class="store-address">距您4.05km</view>
							</view>
							<view class="store-item ss-flex justify-between align-center">
								<view class="store-time">营业中 10:00~22:00</view>
								<view class="store-phone ss-flex justify-center align-center">
									<uni-icons type="phone-filled" size="18"></uni-icons>
								</view>
							</view>
						</view>
					</view>
				</view> -->
			</view>
			<!-- 替代底部悬浮按钮高度盒子 勿删 -->
			<view class="phony"></view>
			<!-- 购物车图标 -->
			<view class="group-cart">
				<view style="position: relative;width: 86rpx;
		height: 86rpx;">
					<image class="group-cart-image" src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/mengchong/group/group-cart.png" mode="" @click="jumpCart">
					</image>
					<view class="group-num" v-if="cartLength >= 1">{{cartLength}}</view>
				</view>
			</view>
			<view class="bottom-box ss-safe-bottom">
				<view class="ss-p-y-20 ss-p-x-30">
					<view class="btn-box ss-flex justify-between align-center">
						<view class="btn-box-left ss-flex">
							<view class="btn-box-left-item ss-flex flex-column align-center justify-center ss-m-r-60"
								@click="goStore">
								<image class="image"
									src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/mengchong/group/group-item-1.png">
								</image>
								<view class="text">门店</view>
							</view>
							<!-- <view class="btn-box-left-item ss-flex flex-column align-center justify-center ss-m-r-40"
								@click="collect">
								<image class="image"
									src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/mengchong/group/group-item-2.png">
								</image>
								<view class="text">收藏</view>
							</view> -->
							<button 
								class="btn-box-left-item ss-flex flex-column align-center justify-center"  @click="showShareModal">
								<image class="image"
									src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/mengchong/group/group-item-3.png">
								</image>
								<view class="text">分享到群</view>
							</button>
						</view>
						<view class="btn-box-right ss-flex">
							<view class="cart-btn" @click="addCart">加入购物车</view>
							<view class="buy-btn" @click="buy">立即购买</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 确认订单 -->
			<confirmOrder :show="state.show" :data="state.data" @close="close"></confirmOrder>
		</template>
	</s-layout>
</template>

<script setup>
	import {
		computed,
		reactive,
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import confirmOrder from './components/confirm-order.vue';
	import { showShareModal } from '@/sheep/hooks/useModal';
	import {
		isEmpty
	} from 'lodash';
	import _ from 'lodash';
	const state = reactive({
		bgColor: 'transparent',
		tabs_left: '35rpx', // 第一个35 第二个210
		tabs_index: 0,
		show: false,
		id: '',
		data: null,
		request:false,
		business_rule:[]
	})

	const hair = {
		1: '短毛',
		2: '长毛',
		3: '不限制'
	}

	const shareData = computed(() => {

		if (isEmpty(state.data)) return {};
		return sheep.$platform.share.getShareInfo({
			title: state.data && state.data.title,
			image: state.data && sheep.$url.cdn(state.data.image),
			desc:  state.data && state.data.details,
			params: {
				page: 7,// 页面类型: 1=首页(默认),2=商品,3=拼团商品,4=秒杀商品,5=邀请参团,6=分享商户,7=团购商品...按需扩展
				query: state.id,
			},
		}, {
			type: 'group', // 商品海报
			id: state.data.id, //商品ID
			title: state.data && state.data.title,
			image: state.data && sheep.$url.cdn(state.data.image),
			price:state.data.price, // 商品价格
			original_price:state.data.original_price, // 商品原价
		}, );
		
	})
	
	const cartLength = computed(() => sheep.$store('cart').cartLength)
	
	const calcBusiness=computed(()=>{
		if(state.business_rule && state.business_rule[0]){
			return state.business_rule[0].start+"至"+state.business_rule[0].end+" "+state.business_rule[0].time_begin+"-"+state.business_rule[0].time_end;
		}
	})

	onLoad((options) => {
		if (options) {
			if(options.scene){
				const sceneParams = decodeURIComponent(options.scene).split('=');
				options[sceneParams[0]] = sceneParams[1];
			}
			state.id = options.id
			getData()
		}
		sheep.$store('cart').getGroupList()
	})
	
	const jumpCart = () => {
		sheep.$router.go('/pages/merchant/cart')
	}

	const close = () => {
		state.show = false
	}

	const buy = () => {
		if (state.data.stocks === 0) {
			return uni.showToast({
				title: '库存不足',
				icon: 'error',
				duration: 1500
			});
		}
		state.show = true
	}

	// 加入购物车
	const addCart = async () => {
		if (state.request) {
			return 
		}
		state.request = true
		const {
			error,
			data
		} = await sheep.$api.merchant.groupAddCart({
			goods_id: state.data.id,
			goods_num: 1,
			goods_sku_price_id: 0,
			type: "inc",
			store_id: state.data.store_id
		})
		
		state.request = false
		
		if (error === 0) {
			await sheep.$store('cart').getGroupList()
			uni.showToast({
				title: '添加成功',
				icon: 'none',
				duration: 1500
			});
		}
	}

	// 返回
	const goStore = () => {
		sheep.$router.back()
	}

	// 收藏
	const collect = () => {

	}

	const getData = async () => {
		const {
			error,
			data
		} = await sheep.$api.merchant.groupDetails(state.id)
		console.log('getData:',data);
		if (error === 0) {
			state.data = data
			state.business_rule = JSON.parse(data.business_rule)
			if(state.data.relate_store_list.data.length>3){
				state.data.relate_store_list.data=state.data.relate_store_list.data.slice(0,3)
			}
		}
	}
	const itemClick = (e) => {
	  var index = _.findIndex(state.data.relate_store_list.data, { id: e.id });
	  var item = state.data.relate_store_list.data[index];

	  sheep.$router.go('/pages/merchant/info',{id:e.id});
	  setTimeout(() => {
		uni.$emit('select_shop', {
		  ...item,
		  title:item.name,
		  selectType: 'goods',
		});
	  }, 50);
	};
	const changeTabs = (index) => {
		state.tabs_index = index
		if (index === 0) {
			state.tabs_left = '35rpx'
		} else {
			state.tabs_left = '210rpx'
		}
	}
</script>

<style scoped lang="scss">
	view {
		box-sizing: border-box;
	}

	.goods-image {
		width: 100%;
		height: 750rpx;
	}

	.goods-info-box {
		width: 100%;
		background: #F6F6F6;
		border-radius: 20rpx;
		margin-top: -90rpx;
		position: relative;

		.price {
			.price-left {
				.money {
					font-weight: bold;
					font-size: 42rpx;
					color: var(--ui-BG-5);
				}

				.discount {
					height: 24rpx;
					border-radius: 6rpx;
					border: 1rpx solid var(--ui-BG-5);
					font-weight: 400;
					font-size: 18rpx;
					color: var(--ui-BG-5);
					line-height: 24rpx;
				}

				.original {
					font-weight: 400;
					font-size: 24rpx;
					color: #9C9C9C;
					text-decoration-line: line-through;
				}
			}

			.price-right {
				font-weight: 400;
				font-size: 24rpx;
				color: #909090;
			}
		}

		.prompt {
			width: 702rpx;
			// height: 289rpx;
			background: #FFFFFF;
			border-radius: 20rpx;

			.goods-name {
				width: 100%;
				height: 90rpx;
				border-bottom: 1rpx solid #D8D8D8;
				font-weight: bold;
				font-size: 30rpx;
				color: #131313;
				line-height: 90rpx;
			}

			.prompt-label {
				font-weight: 400;
				font-size: 22rpx;
				color: #7B7B7B;
			}

			.prompt-content {
				font-weight: 400;
				font-size: 22rpx;
				color: #222222;
			}
		}

		.tabs {
			position: relative;

			.tabs-item {
				font-weight: 500;
				font-size: 30rpx;
				color: #393939;
			}

			.tabs-line {
				position: absolute;
				bottom: -10rpx;
				width: 40rpx;
				height: 6rpx;
				background: #35C7A8;
				transition-duration: 300ms;
			}
		}

		.details {
			width: 702rpx;
			background: #FFFFFF;
			border-radius: 20rpx;

			.suit {
				.suit-label {
					font-weight: 400;
					font-size: 24rpx;
					color: #AAAAAA;
				}

				.suit-content {
					flex: 1;
					font-weight: 400;
					font-size: 24rpx;
					color: #222222;
				}
			}

			.project-list {
				.project-item {
					.content-top {
						width: 642rpx;
						height: 68rpx;
						background: #FFF5F0;
						border-radius: 10rpx 10rpx 0 0;
						border: 1rpx solid #DCDCDC;
						font-weight: 500;
						font-size: 28rpx;
						color: #424242;
						line-height: 68rpx;
					}

					.content-bottom {
						width: 642rpx;
						border-radius: 0 0 10rpx 10rpx;
						border-left: 1rpx solid #DCDCDC;
						border-right: 1rpx solid #DCDCDC;
						border-bottom: 1rpx solid #DCDCDC;

						.content-b-left {
							font-weight: 500;
							font-size: 24rpx;
							color: #424242;
							margin-right: 40rpx;
						}

						.content-b-right {
							flex: 1;

							.content-b-right-item {
								font-weight: 400;
								font-size: 24rpx;
								color: #222222;
							}

							.content-b-right-remark {
								font-weight: 400;
								font-size: 22rpx;
								color: #9B9B9B;
							}
						}
					}
				}
			}

			.original-price {
				font-weight: 400;
				font-size: 24rpx;
				color: #222222;
				text-align: right;
				margin: 12rpx 0 30rpx 0;
			}

			.describe {
				font-weight: 400;
				font-size: 24rpx;
				color: #707070;
				border-top: 1rpx solid #D8D8D8;
				border-bottom: 1rpx solid #D8D8D8;
			}

			.details-title {
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
			}
		}

		.instructions {
			.instructions-title {
				font-weight: 500;
				font-size: 30rpx;
				color: #131313;
			}

			.instructions-box {
				width: 702rpx;
				background: #FFFFFF;
				border-radius: 20rpx;

				.instructions-item-label {
					font-weight: 500;
					font-size: 24rpx;
					color: #131313;
				}

				.instructions-item-content {
					font-weight: 400;
					font-size: 24rpx;
					color: #707070;
				}
			}
		}

		.store {
			.store-title {
				font-weight: 500;
				font-size: 30rpx;
				color: #131313;
			}

			.store-box {
				width: 702rpx;
				height: 148rpx;
				background: #FFFFFF;
				border-radius: 20rpx;

				.store-box-left {
					width: 100rpx;
					height: 100rpx;
					background: #E6E6E6;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}

				.store-box-right {
					flex: 1;
					height: 100rpx;

					.store-item {
						width: 100%;

						.store-name {
							font-weight: 500;
							font-size: 30rpx;
							color: #131313;
						}

						.store-address {
							font-weight: 400;
							font-size: 24rpx;
							color: #707070;
						}

						.store-time {
							font-weight: 400;
							font-size: 24rpx;
							color: #707070;
						}

						.store-phone {
							width: 40rpx;
							height: 40rpx;
							background: #F0F0F0;
							border-radius: 10rpx;
						}
					}
				}
			}
		}
	}

	.bottom-box {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 999;
		background-color: #fff;

		.btn-box {

			.btn-box-left {
				.btn-box-left-item {
					padding: 0;
					min-height: 0;
					line-height: normal;
					font-weight: 400;
					font-size: 18rpx;
					background-color: #fff;

					.image {
						width: 40rpx;
						height: 40rpx;
					}

					.text {
						font-weight: 400;
						font-size: 18rpx;
						color: #7C7C7C;
						margin-top: 8rpx;
					}
				}
			}

			.btn-box-right {
				.cart-btn {
					width: 194rpx;
					height: 69rpx;
					background: #333333;
					border-radius: 35rpx 0 0 35rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 69rpx;
					text-align: center;
				}

				.buy-btn {
					width: 194rpx;
					height: 69rpx;
					background: #F46800;
					border-radius: 0 35rpx 35rpx 0;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 69rpx;
					text-align: center;
				}
			}
		}
	}

	.btn-box-left-item::after {
		border: none;
	}

	.group-cart {
		width: 86rpx;
		height: 86rpx;
		position: fixed;
		bottom: 200rpx;
		right: 37rpx;
		z-index: 999;

		.group-cart-image {
			width: 100%;
			height: 100%;
		}
		
		.group-num {
			position: absolute;
			right: 0;
			top: 0;
			width: 30rpx;
			height: 30rpx;
			background: #E81313;
			font-weight: 400;
			font-size: 20rpx;
			color: #FFFFFF;
			line-height: 30rpx;
			text-align: center;
			border-radius: 50%;
		}
	}

	.phony {
		width: 100%;
		height: 400rpx;
	}

	.suit-b-b {
		border-bottom: 1rpx solid #D8D8D8;
	}

	.tab-active {
		color: #35C7A8 !important;
	}
</style>